<template>
  <div class="pc">
    <BackTop></BackTop>
    <Carousel autoplay loop>
      <CarouselItem>
        <div class="demo-carousel">1</div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel2">2</div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel3">3</div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel4">4</div>
      </CarouselItem>
    </Carousel>
    <div class="solution">
      <h2>一站式SaaS软件服务解决方案</h2>
      <h5>新零售、电商、APP、O2O、CRM、ERP等业务满足您的需求</h5>
      <div class="icon">
        <Row :gutter="16">
          <i-col span="6">
            <Icon type="ios-cart-outline" class="icon-size" />
            <p>新零售</p>
          </i-col>
          <i-col span="6">
            <Icon type="logo-codepen" class="icon-size" />
            <p>企业办公</p>
          </i-col>
          <i-col span="6">
            <Icon type="ios-people-outline" class="icon-size" />
            <p>客户管理</p>
          </i-col>
          <i-col span="6">
            <Icon type="ios-laptop" class="icon-size" />
            <p>电商平台</p>
          </i-col>
        </Row>
        <br />
        <br />
        <Row :gutter="16">
          <i-col span="6">
            <Icon type="ios-folder-open-outline" class="icon-size" />
            <p>进销存</p>
          </i-col>
          <i-col span="6">
            <Icon type="md-globe" class="icon-size" />
            <p>跨境电商</p>
          </i-col>
          <i-col span="6">
            <Icon type="ios-phone-portrait" class="icon-size" />
            <p>移动App</p>
          </i-col>
          <i-col span="6">
            <Icon type="ios-code-working" class="icon-size" />
            <p>微信小程序</p>
          </i-col>
        </Row>
        <br />
        <Button>敬请等待</Button>
      </div>
      <div class="introduce">
        <div class="container">
          <div class="nav">
            <ui>
              <li>新零售</li>
              <li>企业办公</li>
              <li>客户管理</li>
              <li>电商平台</li>
              <li>进销存</li>
              <li>跨境电商</li>
              <li>移动App</li>
              <li>微信小程序</li>
            </ui>
          </div>
        </div>
      </div>
      <div class="customized">
        <h2>专业定制化开发项目管理体系</h2>
        <h5>以客户为中心、以技术为核心</h5>
        <div class="container">
          <div class="row">
            <Row :gutter="16">
              <i-col span="6">
                <div class="step">
                  <div class="step-cont">
                    <span class="number">01</span>
                    <span>商务洽谈</span>
                  </div>
                </div>
              </i-col>
              <i-col span="6">
                <div class="step1">
                  <div class="step-cont">
                    <span class="number">02</span>
                    <span>产品需求确认</span>
                  </div>
                </div>
              </i-col>
              <i-col span="6">
                <div class="step1">
                  <div class="step-cont">
                    <span class="number">03</span>
                    <span>项目开发</span>
                  </div>
                </div>
              </i-col>
              <i-col span="6">
                <div class="step2">
                  <div class="step-cont">
                    <span class="number">04</span>
                    <span>测试交付</span>
                  </div>
                </div>
              </i-col>
            </Row>
            <br />
            <br />
            <Row :gutter="16">
              <i-col span="6">
                <Row>
                  <i-col span="8">
                    <div class="point">
                      <div>售前咨询</div>
                    </div>
                  </i-col>
                  <i-col span="8">
                    <div class="point">
                      <div>初步方案</div>
                    </div>
                  </i-col>
                  <i-col span="8">
                    <div class="point">
                      <div>商务确定</div>
                    </div>
                  </i-col>
                </Row>
              </i-col>
              <i-col span="6">
                <Row>
                  <i-col span="6">
                    <div class="point">
                      <div>产品需求分析</div>
                    </div>
                  </i-col>
                  <i-col span="6">
                    <div class="point">
                      <div>原型图设计</div>
                    </div>
                  </i-col>
                  <i-col span="6">
                    <div class="point">
                      <div>ui设计</div>
                    </div>
                  </i-col>
                  <i-col span="6">
                    <div class="point">
                      <div>静态页面设计</div>
                    </div>
                  </i-col>
                </Row>
              </i-col>
              <i-col span="6">
                <Row>
                  <i-col span="6">
                    <div class="point">
                      <div>开发团队组建</div>
                    </div>
                  </i-col>
                  <i-col span="6">
                    <div class="point">
                      <div>开发周期设计</div>
                    </div>
                  </i-col>
                  <i-col span="6">
                    <div class="point">
                      <div>定制开发</div>
                    </div>
                  </i-col>
                  <i-col span="6">
                    <div class="point">
                      <div>单元测试</div>
                    </div>
                  </i-col>
                </Row>
              </i-col>
              <i-col span="6">
                <Row>
                  <i-col span="6">
                    <div class="point">
                      <div>bug收集及修改</div>
                    </div>
                  </i-col>
                  <i-col span="6">
                    <div class="point">
                      <div>客户业务流程测试</div>
                    </div>
                  </i-col>
                  <i-col span="6">
                    <div class="point">
                      <div>服务器部署</div>
                    </div>
                  </i-col>
                  <i-col span="6">
                    <div class="point">
                      <div>项目交付</div>
                    </div>
                  </i-col>
                </Row>
              </i-col>
            </Row>
          </div>
        </div>
      </div>
      <div class="characteristic">
        <h2>我们的特点</h2>
        <h5>优质软件体验、灵活计算策略</h5>
        <div class="container">
          <Row :gutter="16">
            <i-col span="6" class="col">
              <Card style="width:200px;height:260px;">
                <div style="text-align:center">
                  <h3>专业的UI设计</h3>
                  <h5>能够精准的把握用户需求，带个用户极致的视觉体验</h5>
                </div>
              </Card>
            </i-col>
            <i-col span="6" class="col">
              <Card style="width:200px;height:260px;">
                <div style="text-align:center">
                  <h3>先进的开发技术</h3>
                  <h5>安全性高、稳定性强、体验佳</h5>
                </div>
              </Card>
            </i-col>
            <i-col span="6" class="col">
              <Card style="width:200px;height:260px;">
                <div style="text-align:center">
                  <h3>有效提升营销效果</h3>
                  <h5>通过大数据分析用户行为、分析数据并提升营销效果</h5>
                </div>
              </Card>
            </i-col>
            <i-col span="6" class="col">
               <Card style="width:200px;height:260px;">
                <div style="text-align:center">
                  <h3>贴心的上线支持</h3>
                  <h5>用心为客户服务，做到即时响应、专业快速处理问题</h5>
                </div>
              </Card>
            </i-col>
          </Row>
        </div>
      </div>
      <div class="register">
        <h2>开始体验免费试用</h2>
        <h5>注册即可享受权限系统解决方案的体验，更有资深营销专家为您服务，为您提供最佳企业服务</h5>
        <Button ghost>免费注册</Button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.demo-carousel {
  height: 400px;
  background-color: #515a6e;
}
.demo-carousel2 {
  height: 400px;
  background-color: #21608c;
}
.demo-carousel3 {
  height: 400px;
  background-color: #111222;
}
.demo-carousel4 {
  height: 400px;
  background-color: #162d59;
}
.solution {
  text-align: center;
  margin-top: 50px;
  letter-spacing: 3px;
  .icon {
    width: 960px;
    margin: 0 auto;
    margin-top: 30px;
  }
  .icon-size {
    font-size: 32px;
  }
  p {
    padding-top: 5px;
  }
}
.introduce {
  height: 260px;
  background: #212735;
  margin-top: 30px;
  padding-top: 40px;
  .container {
    width: 900px;
    margin: 0 auto;
    .nav {
      width: 120px;
      text-align: right;
      padding-right: 10px;
      border-right: 1px dashed #f5f5f5;
      list-style: none;
      li {
        padding-top: 5px;
        color: #f5f5f5;
      }
    }
  }
}
.customized {
  text-align: center;
  margin-top: 50px;
  letter-spacing: 3px;
  .container {
    background: #f2f2f2;
    margin-top: 30px;
    height: 340px;
    .row {
      width: 900px;
      margin: 0 auto;
      padding-top: 30px;
    }
  }
}
.characteristic {
  margin-top: 50px;
  .container {
    padding-top: 30px;
    width: 900px;
    margin: 0 auto;
  }
}
.register {
  height: 150px;
  background: #f1f1f1;
  margin-top: 20px;
  padding-top: 30px;
  h5 {
    padding-top: 10px;
  }
  button {
    margin-top: 10px;
    color: #333333;
    border-color: #333333;
  }
}
.point {
  width: 10px;
  height: 10px;
  border-radius: 50px;
  border: 1px dashed;
  div {
    margin-top: 90px;
  }
}
.point:after {
  margin: 0;
  padding: 0;
  position: absolute;
  border-left: 1px dashed #515a6e;
  height: 80px;
  content: "";
  top: 9px;
  left: 5px;
}
.step {
  width: 200px;
  border-bottom: 20px solid #ffffff;
  border-right: 20px solid transparent;
  position: relative;
  .step-cont {
    position: absolute;
    line-height: 40px;
    z-index: 1;
    margin-left: 15px;
    font-size: 16px;
    .number {
      font-weight: 600;
    }
  }
}
.step:after {
  width: 200px;
  height: 0;
  border-right: 20px solid transparent;
  border-top: 20px solid #ffffff;
  position: absolute;
  content: "";
  top: 20px;
  left: 0px;
  box-shadow: darkgrey -10px 10px 5px -8px;
}

.step1 {
  width: 200px;
  transform: skew(40deg);
  border-bottom: 20px solid #ffffff;
  position: relative;
  .step-cont {
    transform: skew(-40deg);
    position: absolute;
    line-height: 40px;
    z-index: 1;
    margin-left: 15px;
    font-size: 16px;
    .number {
      font-weight: 600;
    }
  }
}
.step1:after {
  width: 200px;
  border-top: 20px solid #ffffff;
  position: absolute;
  transform: skew(-60deg);
  content: "";
  top: 20px;
  left: -17px;
  box-shadow: darkgrey 0px 10px 5px -8px;
}
.step2 {
  width: 200px;
  border-left: 20px solid transparent;
  border-bottom: 20px solid #ffffff;
  border-top: 20px solid #ffffff;
  box-shadow: darkgrey 0px 10px 5px -8px;
  .step-cont {
    position: absolute;
    line-height: 0px;
    z-index: 1;
    margin-left: 15px;
    font-size: 16px;
    .number {
      font-weight: 600;
    }
  }
}
</style>
